<script setup lang='ts'>
import { usePortrait } from "./hooks/creditRating";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  CirclePlusFilled
} from "@element-plus/icons-vue";
const {
  pagination,
  columns,
  newReportVisible,
  handleSizeChange,
  handleCurrentChange,
  showReport,
  filterSelectId,
  tableData,
  caseList,
  caseDialog,
  createData,
  detailData,
  saveCase,
  clickReport,
  showCaseDetail,
  filterProject,
  filterDataList,
  resultStr,
  cancelAddNew,
} = usePortrait()
import { ref, reactive, nextTick, watch } from "vue";
</script>

<template>
  <div class="main">
    <PureTableBar class="list_hei" title="信用评级报告">
      <template #buttons>
        <el-button type="primary" @click="newReportVisible = true"> 新建评级报告 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small" :data="caseList"
          :columns="columns" :checkList="checkList" :pagination="pagination" max-height="600" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <template #operation="{ row }">
            <el-button type="primary" size="small" text @click="showCaseDetail(row)"> 查看详情 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>

  <!-- 添加方案窗口 -->
  <!-- //添加信用评级报告 -->
  <ReDialog :width="800" :height="500" :models="newReportVisible" @Closes="cancelAddNew()">
    <template #header>
      <h2 style="text-align: center;">新增信用评级报告</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">

        <div style="display: flex;
                          justify-content: center;">
          资产证券化项目：<el-select placeholder="请选择资产证券化项目" v-model="filterSelectId" style="width: 250px;">
            <el-option v-for="item in filterDataList" :key="item.projectProposalId" :label="item.assetSecuritizationName"
              :value="item.projectProposalId" @click="filterProject(item)" />
          </el-select>
        </div>
        <div style="flex-wrap: wrap;width:100%" v-if="filterSelectId !== ''">
          <div style="display: flex;
                                                                        justify-content: center;">
            <table style="width: 70%;
                                                                      text-align: center;margin-top:30px">
              <thead>
                <tr>
                  <th width="10%">资产支持证券</th>
                  <th width="10%">发行额（元）</th>
                  <th width="10%">占比（%）</th>
                  <th width="10%">利率</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{ item.priorityName }}</td>
                  <td>{{ item.issuanceMoney }}</td>
                  <td>{{ item.sizePercentage }}</td>
                  <td>{{ item.interestRate }}%</td>
                </tr>
                <tr>
                  <td>合计</td>
                  <td>{{ createData.issuanceAmount }}</td>
                  <td>100</td>
                  <td></td>
                </tr>
                <tr>
                  <td>起始结算日</td>
                  <td colspan="3">{{ createData.initialStartDate }}</td>
                </tr>
                <tr>
                  <td>法定最终到期日</td>
                  <td colspan="3">{{ createData.legalFinalMaturityDate }}</td>
                </tr>
                <tr>
                  <td>入池资本</td>
                  <td colspan="3">金融有限公司的应收账款债权</td>
                </tr>
                <tr>
                  <td>本金余额</td>
                  <td colspan="3">人民币{{ createData.principalBalance }}元</td>
                </tr>
                <tr>
                  <td>发起/服务机构</td>
                  <td colspan="3">金融公司</td>
                </tr>
                <tr>
                  <td>受托机构</td>
                  <td colspan="3">{{ createData.trusteeSpv }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="saveCase()" type="primary">确定</el-button>
        <el-button @click="cancelAddNew()"> 关闭 </el-button>
      </span>
    </template>
  </ReDialog>
  <!-- //信用报告详情 -->

  <ReDialog :width="800" :height="500" :models="caseDialog" @Closes="caseDialog = false">
    <template #header>
      <h2 style="text-align: center;">信用评级报告</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <div style="display: flex;justify-content: center;">
          <table style="width: 70%;text-align: center;margin-top:30px">
            <thead>
              <tr>
                <th width="10%">资产支持证券</th>
                <th width="10%">发行额（元）</th>
                <th width="10%">占比（%）</th>
                <th width="10%">利率</th>
                <th width="10%">预定评级</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in detailData.creditEnhancementRanking" :key="index">
                <td>{{ item.priorityName }}</td>
                <td>{{ item.issuanceMoney }}</td>
                <td>{{ item.sizePercentage }}</td>
                <td>{{ item.interestRate }}%</td>
                <td>{{ item.preGrade }}</td>
              </tr>
              <tr>
                <td>合计</td>
                <td>{{ detailData.issuanceAmount }}</td>
                <td>100</td>
                <td></td>
              </tr>
              <tr>
                <td>起始结算日</td>
                <td colspan="4">{{ detailData.initialStartDate }}</td>
              </tr>
              <tr>
                <td>法定最终到期日</td>
                <td colspan="4">{{ detailData.legalFinalMaturityDate }}</td>
              </tr>
              <tr>
                <td>入池资本</td>
                <td colspan="4">金融有限公司的应收账款债权</td>
              </tr>
              <tr>
                <td>本金余额</td>
                <td colspan="4">人民币{{ detailData.principalBalance }}元</td>
              </tr>
              <tr>
                <td>发起/服务机构</td>
                <td colspan="4">金融公司</td>
              </tr>
              <tr>
                <td>受托机构</td>
                <td colspan="4">{{ detailData.trusteeSpv }}</td>
              </tr>
              <tr>
                <td>评级观点</td>
                <td colspan="4" style="text-align: start;">
                  XX信用评级有限公司对本期交易所涉及的基础资产、交易结构、现金流、法律要素、有关参与方履约及操作风险等因素进行了考量，考虑到资产池涉及借款人众多，分散性良好，而且贷款信用保证保险提供机构偿付能力强，信用水平极高，能更好地履行理赔义务，在此基础上确定；<br>
                  “{{ detailData.projectName }}”项目的评级结果为：{{ resultStr }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-scrollbar>
    </template>
  </ReDialog>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.contain {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: scroll;
}

.con-left {
  width: 100%;
}

.con-right {
  flex: 1;
  display: flex;
  background-color: red;
}

.triangle {
  cursor: pointer;
  border: 2px solid #333;
  width: 23%;
  height: 150px;
  margin-right: 10%;
  margin-top: 20px;
  background: linear-gradient(to top right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%),
    linear-gradient(to bottom right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle1 {
  border: 1px solid #fff;
  background: #fff;
  text-align: center;
}

.iocn {
  width: 50px;
  font-size: 20px;
  display: inline-block;
  padding: 2px;
  color: #409Eff;
}

table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}

.table-center {
  margin-top: 20px;
  text-align: center;
}


:deep(.el-input__inner) {
  text-align: center;
}

.blue-text {
  color: #409Eff
}

:deep(.el-form-item__label) {
  font-weight: 700
}
</style>
